<template>
  <div class="my-body">
    <div class="my-flow">
      <div v-for="(v,i) in tableData" :key="i">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <el-image
              :src="baseURL+'/small-service-flowable/process/definition/getImg?deploymentId='+v.deploymentId+'&diagramResourceName='+v.diagramResourceName"
              class="image"
              fit="contain"/>
          <div style="padding: 14px;background-color: #F2F6FC">
            <span>{{ v.processDefinitionName }}</span>
            <el-row type="flex" justify="end" style="margin: 10px 0">
              <el-button plain size="mini" @click="startTheProcess(v)">启动流程</el-button>
            </el-row>
            <div class="bottom clearfix">
              <time class="time"> {{ momentF(v.lastUpdated) }}</time>
              <el-button type="text" class="button" @click="viewHistory(v)">当前版本{{ v.version }}</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
        :visible.sync="dialogShow"
        top="15px"
        title="历史版本"
        width="1200px">
      <div class="my-flow">
        <div v-for="(v,i) in history" :key="i" style="width: 250px">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <el-image
                :src="baseURL+'/small-service-flowable/process/definition/getImg?deploymentId='+v.deploymentId+'&diagramResourceName='+v.diagramResourceName"
                class="image"
                fit="contain"/>
            <div style="padding: 14px;background-color: #F2F6FC">
              <span>{{ v.processDefinitionName }}</span>
              <div class="bottom clearfix">
                <time class="time"> {{ momentF(v.lastUpdated) }}</time>
                <el-button type="text" class="button">当前版本{{ v.version }}</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-dialog>
    <el-dialog
        :visible.sync="dialogShowB"
        top="15px"
        title="启动表单"
        width="400px">
      <form-model-v :fields="fields" :processDefinitionId="row.processDefinitionId" :isStart="true" @refresh="refresh"/>
    </el-dialog>
  </div>
</template>

<script>
import table from "@/mixins/table";
import service from "@/api/service";
import FlowableSVG from "@/components/flowChart";
import moment from 'moment'
import formModelV from '@/components/formModelV'

export default {
  name: "processDefinition",
  mixins: [table],
  components: {
    FlowableSVG, formModelV
  },
  data() {
    return {
      baseURL: service.baseURL,
      flowChart: {},
      history: [],
      dialogShowB: false,
      fields: {},
      row: {}
    }
  },
  mounted() {
    // this.init()
  },
  methods: {
    init() {
      service.get('/small-service-flowable/process/definition/active/list').then(res => {
        this.tableData = res.data
      })
    },
    momentF(v) {
      return moment(v).format("YYYY-MM-DD HH:mm")
    },
    viewHistory(v) {
      this.dialogShow = true;
      service.get('/small-service-flowable/process/definition/active/list/history', {
        processDefinitionKey: v.processDefinitionKey
      }).then(res => {
        this.history = res.data
      })
    },
    startTheProcess(row) {
      this.row = row
      service.get('/small-service-flowable/form/getRenderedStartForm', {
        processDefinitionId: row.processDefinitionId,
      }).then(res => {
        if (res.status === 200) {
          this.dialogShowB = true;
          this.fields = res.data.fields
        }
      })
    },
    refresh() {
      this.dialogShowB = false;
      this.init()
    }
  }
}
</script>

<style scoped lang="less">
.my-flow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  > div {
    width: 300px;
    margin: 10px;
  }
}

.image {
  height: 250px;
}

.time {
  font-size: 13px;
  color: #999;
}

.button {
  padding: 0;
  float: right;
}
</style>